<template>
  <div>
      <!-- 本页主要作用是判断滚动条高度，完成吸顶 -->
      <!-- 使用三元表达式判断滚动条高度 -->
    <TopBar ref="topnav" :class="fixed ? 'fixed ':''"></TopBar>
    <router-view></router-view>
  </div>
</template>

<script>
import TopBar from "../../components/TopBar/index";
export default {
  data() {
    return {
        //吸顶的触发数据，默认不吸顶
        fixed:false
    };
  },
  components: {
    TopBar,
  },
  mounted() {
    //注意，属性是在refs中,他是组件实例，$el是dom对象
    //监听滚动条,vue本身要求高，因此不需要做兼用处理
    window.addEventListener(
      "scroll",
      (e) => {
        let top = document.documentElement.scrollTop;
        //大于则导航吸顶，小于则还原
        // console.log(t)
        let offset =this.$refs.topnav.$el.offsetHeigh;
        if (top > offset) {
          this.fixed=true;
        } else {
           this.fixed=false;
        }
      },
    //   冒泡和捕获，建议使用true
      true
    );

  },
};
</script>

<style lang="scss" scoped>
//吸顶样式
.fixed{
    position: fixed;
    top:0;
background:white;
}
</style>
